<!-- BEGIN: Subheader -->
<div class="m-subheader">
    <div class="d-flex align-items-center">
        <div class="mr-auto">
            <h3 class="m-subheader__title">
                配置管理
            </h3>
            <ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
                <li class="m-nav__item m-nav__item--home">
                    <a href="#" class="m-nav__link m-nav__link--icon">
                        <i class="m-nav__link-icon la la-home"></i>
                    </a>
                </li>
            </ul>
        </div>
        <div>
        </div>
    </div>
</div>
<!-- END: Subheader -->

<div class="m-content">

    <div class="m-portlet m-portlet--mobile">
        <div class="m-portlet__head">
            <div class="m-portlet__head-caption">
                <div class="m-portlet__head-title">
                    <h3 class="m-portlet__head-text">
                        数据列表
                    </h3>
                </div>
            </div>
            <div class="m-portlet__head-tools">
                <!--<button class="btn btn-primary float-right" (click)="refresh()">-->
                    <!--<span class="fa fa-refresh"></span> <span>刷新</span>-->
                <!--</button>-->
            </div>
        </div>
        <div class="m-portlet__body">
            <div *ngIf="allConfiguration && configuration">
                <span>过滤 (按前缀)</span> <input type="text" [(ngModel)]="filter" class="form-control">
                <label>Spring configuration</label>
                <table class="table table-striped table-bordered table-responsive d-table">
                    <thead>
                    <tr>
                        <th class="w-40" (click)="orderProp = 'prefix'; reverse=!reverse"><span>前缀</span></th>
                        <th class="w-60" (click)="orderProp = 'properties'; reverse=!reverse"><span>属性</span></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let entry of (configuration | pureFilter:filter:'prefix' | orderBy:orderProp:reverse)">
                        <td><span>{{entry.prefix}}</span></td>
                        <td>
                            <div class="row" *ngFor="let key of keys(entry.properties)">
                                <div class="col-md-4">{{key}}</div>
                                <div class="col-md-8">
                                    <span class="float-right badge badge-secondary break">{{entry.properties[key] | json}}</span>
                                </div>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div *ngFor="let key of keys(allConfiguration)">
                    <label><span>{{key}}</span></label>
                    <table class="table table-sm table-striped table-bordered table-responsive d-table">
                        <thead>
                        <tr>
                            <th class="w-40">Property</th>
                            <th class="w-60">Value</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let item of allConfiguration[key]">
                            <td class="break">{{item.key}}</td>
                            <td class="break">
                                <span class="float-right badge badge-secondary break">{{item.val}}</span>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
